<!DOCTYPE HTML >
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = '../work/jquery-1.12.4.min.js'></script>
    <!--
    ajax
    页面无刷新
    -->
    <script>
        //声明一个data对像
        var data = {
            "HN": {
                name: "湖南省",
                child: {
                    "GZ": {
                        name: "长沙市",
                        child: {
                            "YL": {name: "岳麓区"},
                            "YH": {name: "雨花区"},
                            "TX": {name: "天心区"},
                            "KY": {name: "开元区"}

                        }
                    },
                    "ZZ": {
                        name: "株洲市",
                        child: {
                            "LS": {name: "芦淞区"},
                            "SF": {name: "石峰区"},
                            "TY": {name: "天元区"}
                        }
                    }
                }
            },
            "GD": {
                name: "广东省",
                child: {
                    "GZ": {
                        name: "广州市",
                        child: {
                            "YX": {name: "越秀区"},
                            "BY": {name: "白云区"},
                            "HD": {name: "花都区"},
                            "TH": {name: "天河区"}

                        }
                    },
                    "SZ": {
                        name: "深圳市",
                        child: {
                            "FT": {name: "福田区"},
                            "LH": {name: "罗湖区"},
                            "NS": {name: "南山区"},
                            "LG": {name: "龙岗区"}
                        }
                    }
                }
            }
        };
        //页面加载完成
       jQuery(function ($) {
            //先初始化省份的数据
            //循环遍历json数据 for in
            for(var i in data ){
                $('#sel1').append('<option value="'+i+'">'+data[i]["name"]+'</option>');
            }
            //sel1的点击事件
           $('#sel1').change(function () {
                $('option:gt(0)','#sel2').remove();
                $('option:gt(0)','#sel3').remove();
                if (this.value != ""){
                    var sx_data = data[this.value]['child'];
                    for(var i in sx_data ){
                        $('#sel2').append('<option value="'+i+'">'+sx_data[i]["name"]+'</option>');
                    }
                }
       });
            //sel2的点击事件
         $('#sel2').change(function () {
             $('option:gt(0)', '#sel3').remove();
             if (this.value != "") {
                 var qy_data = data[$("#sel1").val()]['child'][this.value]['child'];
                 for (var i in qy_data) {
                     $('#sel3').append('<option value="' + i + '">' + qy_data[i]["name"] + '</option>');
                 }
             }
             });
        });
    </script>
</head>
<body>
    省份：<select id="sel1"><option value="">请选择</option></select>
    市县：<select id="sel2"><option value="">请选择</option></select>
    区域：<select id="sel3"><option value="">请选择</option></select>
</body>
</html>